<template>
	<list-box :name="name" :word="word">
		<!-- 默认展示2列，每列4行 -->
		<!-- next-margin 露出后一项的一小部分， 高度动态计算，每行占200rpx， -->
		<swiper class="list-swiper" next-margin="30rpx" :style="{height: `${200*rows}rpx`}">
			<!--如果循环是数值，app/h5端n是1开始，微信小程序从0开始。index任何端都是从0开始--> -->
			<swiper-item class="swiper-item" v-for="(n, index) in column" :key="index">
				<!-- <view v-for="(item, i) in 4" :key="i">{{index}} - {{item}}</view>-->
				<!-- slice(start, end)返回一个新数组 包头不包尾，开始下标 {{index * 4}} 结束下标 {{ (index+1)*4 }} -->
				<!-- 父组件想在子组件上监听自己的click的话，需要加上native修饰符，@click.navtive -->
				<course-item v-for="(item, i) in courseData.slice(index*rows, (index+1)*rows)" :key="item.id" :item="item"></course-item>
			</swiper-item>
		</swiper>
	</list-box>
</template>
<script>
	import listBox from './list-box.vue'
	import courseItem from '@/components/common/course-item.vue'
	import courseData from '@/mock/courseData.js'

	export default {
		components: {
			listBox,
			courseItem
		},
		props: {
			name: { // 名称
				type: String,
				default: '热门推荐'
			},
			word: { // 高亮单词，如： 'HOT'
				type: String,
				default: null
			},
			column: { // 默认2列
				type: Number,
				default: 2
			},
			rows: { // 默认有几行
				type: Number,
				default: 5
			},
			courseData: {
				type: Array,
				default: () => courseData
			}
		}
	}
</script>
